<template>
  <div>
    <div style="float:left">
      <div>
        <el-row :gutter="30">
          <el-col :span="30">
            <el-card shadow="always">
              <div class="block">
                <span class="demonstration">请选择要查看的月份</span>
                <el-date-picker v-model="selectTime" type="month" placeholder="选择月"></el-date-picker>
                <el-button type="primary" @click="getSearchTime">查看</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- <div>
        
        <el-row :gutter="30">
          <el-col :span="30">
            <el-card shadow="always">当前月份为：{{SelectMonth}}</el-card>
          </el-col>
        </el-row>
      </div>-->
      <!-- 表格渲染 -->
      <div>
        <el-row :gutter="30">
          <el-col :span="30">
            <el-card shadow="hover">当月收入为：{{myTotalMoney}}</el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="30">
          <el-col :span="30">
            <el-card shadow="hover">当月订单数为：{{MyOrderData}}</el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="30">
          <el-col :span="30">
            <el-card shadow="hover">当月访问数为：{{UserCountData}}</el-card>
          </el-col>
        </el-row>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myTotalMoney: "",
      orderData: "",
      moneyData: "",
      userCountData: "",
      selectTime: "",
      selectMonth: "",
      myMonthStartDate: "",
      myMonthEndDate: "",
      timeNowMonth: "",
      timeNowYear: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        }
      }
    };
  },
  mounted() {
    var now = new Date();
    this.timeNowMonth = now.getMonth();
    this.timeNowYear = now.getFullYear();
    var monthStartDate = new Date(this.timeNowYear, this.timeNowMonth, 1);
    var monthEndDate = new Date();
    this.myMonthStartDate = this.formatDateTime1(monthStartDate);
    this.myMonthEndDate = this.formatDateTime1(monthEndDate);
    this.getBeforeDaysAllMoney();
    this.getOrdersInDate();
    this.getUserCountInDate();
  },
  computed: {
    TotalMoney() {
      //let username = sessionStorage.getItem("login_username");
      let money = this.myTotalMoney;
      return money;
    },

    MyOrderData() {
      let data = this.orderData;

      return data;
    },
    UserCountData() {
      let data = this.userCountData;

      return data;
    }
  },
  methods: {
    formatDateTime1(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d;
    },
    getSearchTime() {
      var mySelectMonth = this.selectTime.getMonth();
      var mySelectYear = this.selectTime.getFullYear();
      if (
        mySelectMonth == this.timeNowMonth &&
        mySelectYear == this.timeNowYear
      ) {
        var monthStartDate = new Date(mySelectYear, mySelectMonth, 1);
        var monthEndDate = new Date();
        console.log(new Date());
      } else {
        var monthStartDate = new Date(mySelectYear, mySelectMonth, 1);
        var monthEndDate = new Date(mySelectYear, mySelectMonth + 1, 0);
      }

      console.log(monthStartDate);
      console.log(monthEndDate);

      this.myMonthStartDate = this.formatDateTime1(monthStartDate);
      this.myMonthEndDate = this.formatDateTime1(monthEndDate);
      console.log(this.myMonthStartDate);
      console.log(this.myMonthEndDate);
      this.getBeforeDaysAllMoney();
      this.getOrdersInDate();
      this.getUserCountInDate();
    },
    getBeforeDaysAllMoney() {
      this.$axios
        .get(
          "/ssms/admin/order/getBeforeDaysAllMoney",
          {
            params: {
              startDate: this.myMonthStartDate,
              endDate: this.myMonthEndDate
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.myTotalMoney = res.data.obj;
          }
        });
    },
    getOrdersInDate() {
      this.$axios
        .get(
          "/ssms/admin/order/getOrdersInDate",
          {
            params: {
              startDate: this.myMonthStartDate,
              endDate: this.myMonthEndDate
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.orderData = res.data.obj;
          }
        });
    },
    getUserCountInDate() {
      this.$axios
        .get(
          "/ssms/admin/user/getUserCountInDate",
          {
            params: {
              startDate: this.myMonthStartDate,
              endDate: this.myMonthEndDate
            }
          },
          {
            headers: {
              "Content-Type": "application/json",
              responseType: "application/json"
            }
          }
        )
        .then(res => {
          console.log(res.data);
          if (res.data.code === 0) {
            this.userCountData = res.data.obj;
          }
        });
    }
  }
};
</script>

<style  scoped>
</style>

